<template>
  <section class="xm-content xm-role">
    <el-form
      ref="form"
      v-loading="box_loading"
      :model="form"
      :rules="rules"
      size="mini"
      label-width="100px"
      inline-message
    >
      <el-form-item label="用户" prop="jobNo">
        <el-select v-model="form.jobNos" placeholder="请选择云之家jobno">
          <el-option
            v-for="item in user_jobnos"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="警报类型" prop="types">
        <el-select multiple v-model="form.types" placeholder="请选择警报类型">
          <el-option
            v-for="(item, index) in types"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工位" prop="stations">
        <el-select v-model="form.stations" multiple placeholder="请选择工位">
          <el-option
            v-for="(item, index) in stations"
            :key="index"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="xm-footer">
      <el-button
        type="primary"
        size="mini"
        :loading="btn_loading"
        @click="saves('form')"
        >确 定</el-button
      >
      <el-button type="info" size="mini" @click="close">关 闭</el-button>
    </div>
  </section>
</template>

<script>
import { getPrefer } from '@/api/historymsg'
import { getUserJobNos, addJobNo, editJobNo } from '../../../api/job'
export default {
  props: {
    layerid: {
      default: 0,
    },
    row: {
      default: {},
    },
  },
  data() {
    return {
      types: [
        { id: 1, name: '控制限' },
        { id: 2, name: '上下限' },
        { id: 3, name: '报废限' },
      ],
      box_loading: false,
      btn_loading: false,
      form: {
        types: [],
        jobNos: undefined,
        stations: [],
      },
      stations: [],
      user_jobnos: [],
      rules: {
        types: [{ required: true, message: '必填', trigger: 'change' }],
        jobNos: [{ required: true, message: '必填', trigger: 'change' }],
        stations: [{ required: true, message: '必填', trigger: 'change' }],
      },
    }
  },
  created() {
    this.getUserJobNos()
    this.getPreferList()
  },
  mounted() {
    JSON.stringify(this.row)
    // this.getUserJobNos();
    // this.getPreferList();
    setTimeout(() => {
      if (this.row.id) {
        // console.warn(this.row);
        // this.form = JSON.parse(JSON.stringify(this.row));

        let stations_ = this.str2List(this.row.stations)
        let type_ = this.str2List(this.row.types)

        this.form.stations = stations_
        this.form.types = type_
        this.form.jobNos = this.row.jobNo
        this.form.id = this.row.id
      }
    }, 500)
  },
  methods: {
    async getUserJobNos() {
      const { data } = await getUserJobNos()

      this.user_jobnos = data
    },
    changeColor(e) {
      this.form.color = e
    },
    str2List(str) {
      let list = []
      list = str.split(',')
      return list.map(Number)
    },
    list2Str(list) {
      let result = ''

      list.forEach((item, index) => {
        if (item) {
          result += item + ','
        }
      })

      return result.slice(0, result.length - 1)
    },

    /* 添加、编辑 */
    async saves(formName) {
      let stations = this.list2Str(this.form.stations)
      let types = this.list2Str(this.form.types)
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let reqData = {
            id: this.form.id,
            types: types,
            stations: stations,
            jobNo: this.form.jobNos,
          }

          // var obj = JSON.parse(JSON.stringify(this.form));
          // obj.jobNos = obj.jobNos.join(",");
          this.btn_loading = true
          let res = ''
          if (this.row.id) {
            res = await editJobNo(reqData)
          } else {
            res = await addJobNo(reqData)
          }
          this.btn_loading = false
          if (res.code == '') return false
          Object.assign(this.$data.form, this.$options.data().form)
          this.$layer.close(this.layerid)
          this.$parent.getList()
          this.$message({ message: '操作成功', type: 'success' })
        } else {
          this.$refs[formName].validate()
        }
      })
    },
    getPreferList() {
      getPrefer().then((res) => {
        this.stations = res.data
      })
    },
    close() {
      this.$layer.close(this.layerid)
    },
  },
}
</script>
<style>
.el-upload-list__item {
  transition: none !important;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.el-dialog .el-dialog__footer {
  z-index: 100;
}
</style>
